import React, { useEffect, useState } from 'react';
import ReactXmlViewer from 'react-xml-viewer';
import { request } from '@/zero/utils/axios';

const Index = (props) => {
  const {
    src,
    width = '100%',
    height = 'calc(100vh - 155px)',
    style,
    viewerExtOption,
    ...rest
  } = props;

  const [data, setData] = useState(null);

  useEffect(() => {
    if (src) {
      request(src, {
        responseType: 'text',
      }).then((response) => {
        if (response.success) {
          setData(response.data);
        }
      });
    }
  }, [src]);

  return (
    <div style={{ position: 'relative', width, height, ...style }} {...rest}>
      {data && <ReactXmlViewer {...viewerExtOption} xml={data} />}
    </div>
  );
};

Index.displayName = 'XmlViewer';
export default Index;
